<template>
	<div class="weekend-wrapper">
		<div class="weekend-title">周末去哪儿</div>
		<ul class="weekend-list">
			<li class="weekend-list-item" v-for="item of list" :key="item.id">
				<a :href="item.itemHref" class="weekend-item-con">
					<div class="weekend-item-img">
						<img 
							:src="item.imgUrl" 
							:alt="item.imgAlt"/>
					</div>
					<div class="weekend-item-info">
						<p class="info01">{{item.info01}}</p>
						<p class="info02">{{item.info02}}</p>
					</div>
				</a>
			</li>
		</ul>
	</div>
</template>

<script>
	export default {
		name: 'HomeWeekend',
		props: {
			list: Array
		},
		data: function(){
			return {}
		}
	}
</script>

<style lang="stylus" scoped>
.weekend-wrapper
	.weekend-title
		line-height: 0.4rem
		height: 0.4rem
		margin-left: 0.13rem
		font-size: 0.14rem
	.weekend-list
		.weekend-list-item
			margin-bottom: 0.05rem
			.weekend-item-con
				color: #000
				.weekend-item-img
					overflow: hidden
					height: 0
					padding-bottom: 37.4375%
					img
						width: 100%
				.weekend-item-info
					padding-top: 0.14rem
					padding-bottom: 0.14rem
					padding-left: 0.1rem
					background: #fff
					.info01
						overflow: hidden
						white-space: nowrap
						text-overflow: ellipsis
						color: #212121
						font-size: .14rem
						line-height: .24rem
					.info02
						overflow: hidden
						white-space: nowrap
						text-overflow: ellipsis
						color: #616161
						font-size: .12rem
						line-height: .21rem
</style>
